<template>
  <div>
    <div class="tilte">
        <p>wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。</p>
        <p class="urls">https://www.kancloud.cn/wangfupeng/wangeditor3/332599</p>
    </div>
    <editor :isClear="isClear" @content="get_content"></editor>
    <div class="html" v-html="html_cont1"></div>
    <div class="btn"><el-button type="primary" @click="html_con">点击预览富文本数据</el-button></div>
  </div>
</template>

<script>
import editor from '../components/editor'

export default {
  data () {
    return {
      isClear: false,
      html_cont:'',//富文本内容
      html_cont1:'',
    }
  },
  methods:{
    //获取到子组件传过来的值
    get_content(con){
      this.html_cont = con;
    },
    //点击
    html_con(){
      this.html_cont1 = this.html_cont;
    }
  },
  components: {
    editor
  }
}
</script>
<style lang="less" scoped>
.tilte{
    background: white;
    padding: 20px;
    color: #606266;
    font-weight: bold;
}
.tilte .urls{
    color: red;
}
.btn{
  display: flex;
  align-items: center;
  background: white;
  padding: 10px;
  margin-top: 10px;
}
.html{
  background: white;
  margin-top: 10px;
}
</style>